<template>
  <div class="settings-item">
    <div class="header">
      <div class="title">
        文件上传
        <Tooltip
          transfer
          theme="light"
          placement="bottom"
          max-width="400"
          content="提示"
        >
          <Icon type="ios-help-circle-outline" />
        </Tooltip>
      </div>
      <div class="actions">
        <text-button type="normal" @click="visible=true">{{form.isenable ? '开启' : '关闭'}}</text-button>
      </div>
    </div>
    <div class="content"></div>
  </div>
  <CommonDialog
    title="文件上传"
    v-model="visible"
    :confirmLoading="loading"
    width="500px"
  >
    <Form label-position="left" :label-width="120">
      <FormItem label="文档上传" prop="isenable">
        <Switch v-model="form.isenable" />
      </FormItem>
      <!-- <FormItem label="图片上传" prop="imageOpen">
        <Switch v-model="formData.imageOpen" />
      </FormItem> -->
      <FormItem label="最大文件数量" prop="filemax">
        <Slider :marks="marks" v-model="form.filemax" :min="1" :max="15" :step="1"></Slider>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button type="primary" @click="submit">确认</Button>
    </template>
  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import CommonDialog from '@/components/CommonDialog/index.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  }
})

// 弹窗显示
const visible = ref(false);
const loading = ref(false);

const isOpen = ref(false);

const formData = ref({
  open: false,
  imageOpen: false,
  limit: 2,
});

const marks = ref({
  1: '1',
  15: '15',
})

const submit = () => {
  visible.value = false;
};
</script>

